<!-- left_box -->
<template>
	<transition
		appear
		name="custom-classes-transition"
		enter-active-class="animate__animated animate__faster  animate__fadeInLeft "
		leave-active-class="animate__animated animate__faster animate__fadeOutLeft "
	>
		<div class="left_box">
			<div class="content">
				<slot></slot>
			</div>
		</div>
	</transition>
</template>

<script lang="ts" setup>
	// import { useAnimateStore } from '@/stores/animate'
	import { computed } from 'vue'

	// const animatestore = useAnimateStore()
	// const animate = computed(() => animatestore.$state.Animate)
</script>
<style lang="scss" scoped>
	.left_box {
		position: absolute;

		width: 50%;
		height: 100%;
		// background: url('~@/assets/images/基础/left_bg_dark@2x.png') no-repeat;
		background-size: 100% 100%;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: calc($headerHeight + 25px);
		z-index: 9;
		background-color: rgba(0, 0, 0, 1);
		.content {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			position: relative;
		}
	}
</style>
